const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = {
  publicPath: '/', // 默认为'/', 如果整个单页应用服务在 /app/ 下，然后 publicPath 就应该设为 "/app/"
  productionSourceMap: false,
  css: {
    extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
    sourceMap: false
  },
  chainWebpack: config => {
    // 别名 alias
    config.resolve.alias
      .set('~', resolve('src')) // 默认为@

    // 打包分析
    if (IS_PROD) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'
        }
      ])
    }

    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        // cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
        commons: {
          name: 'chunk-commons',
          test: resolve('src/components'),
          minChunks: 3, //  被至少用三次以上打包分离
          priority: 5, // 优先级
          reuseExistingChunk: true // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
        },
        node_vendors: {
          name: 'chunk-libs',
          chunks: 'initial', // 只打包初始时依赖的第三方
          test: /[\\/]node_modules[\\/]/,
          priority: 10
        },
        vantUI: {
          name: 'chunk-vantUI', // 单独将 vantUI 拆包
          priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的
          test: /[\\/]node_modules[\\/]_?vant(.*)/
        }
      }
    })
  }
}
